﻿<html>
<head>
<meta charset="utf-8">
<title>单曲抽奖</title>

<style>
*{padding:0; margin:0;}
body{
background:url('${rc.contextPath}/images/shengdan.jpg') no-repeat;
background-size:cover;
}
.container{width:800px; height:200; position:fixed; top:50%; left:40%; margin:-100px 0 0 -200px; text-align:center;}
.result-box{ background-color:#FCBFBF;; text-align:center; line-height:60px; font-size:34px;}
button{ width:200px; height:50px; line-height:50px; margin-top:30px; border:none; color:#fff; font-size:24px;}
button:focus{outline:none;}
.start{ background-color:#428bca;}
.end{ background-color:#d9534f;}
</style>
<script type="text/javascript" src='${rc.contextPath}/js/jquery-1.7.2.min.js'></script>
</head>
<body>

<div class="container">
	<div class="result-box">
		${initTxt}
	</div><!--result-box-->
	<button class="start" onClick="start()">开始抽奖</button>
</div><!--container-->
<script type="text/javascript">
	var data=${names};//参与人员
	var btn=true; //按钮状态未开始还是结束
	var key=0; //中奖下标
	var time=0; //定时器

	function runTime(){
		//$("button").show();
		clearInterval(time);
		time=setInterval('trunNum()',10);
	}
	
	//点击按钮
	function start(){
		if(btn){
			btn=false;
			$("button").removeClass("start").addClass("end").text("结束抽奖");
			startTrun();
		}else{
			btn=true;
			$("button").removeClass("end").addClass("start").text("开始抽奖");
			endTrun();
		}
	}

	function trunNum(){
		key=Math.floor(Math.random()*(data.length-1));
		var tel=data[key];
		$(".result-box").text(tel);
	}
	
	//开始转动数字
	function startTrun(){
		runTime();
	}

	//停止转动数字
	function endTrun(){
		clearInterval(time);
	}

</script>

</body>
</html>

